/* ============================================================
   section-divider.css — Separador de seccions V1
   Mil anys Pau i Treva
   ============================================================

   ÚS:
     <div class="section-divider" aria-hidden="true">
       <div class="section-divider__line"></div>
       <div class="section-divider__ornament">
         <svg class="section-divider__star section-divider__star--sm" viewBox="0 0 24 24"><path d="M12 0C12 0 13.2 9 24 12C13.2 15 12 24 12 24C12 24 10.8 15 0 12C10.8 9 12 0 12 0Z"/></svg>
         <svg class="section-divider__star section-divider__star--lg" viewBox="0 0 24 24"><path d="M12 0C12 0 13.2 9 24 12C13.2 15 12 24 12 24C12 24 10.8 15 0 12C10.8 9 12 0 12 0Z"/></svg>
         <svg class="section-divider__star section-divider__star--sm" viewBox="0 0 24 24"><path d="M12 0C12 0 13.2 9 24 12C13.2 15 12 24 12 24C12 24 10.8 15 0 12C10.8 9 12 0 12 0Z"/></svg>
       </div>
       <div class="section-divider__line"></div>
     </div>

   VARIANTS:
     .section-divider--sm   → padding 16px vertical
     .section-divider--md   → padding 28px vertical (default)
     .section-divider--lg   → padding 48px vertical

   CSS VARIABLES (sobreescriu al selector pare):
     --divider-accent        → color de les estrelles (default #9c551c)
     --divider-accent-rgb    → format r,g,b per a les línies (default 156,85,28)
     --divider-star-sm       → mida estrella petita (default 14px)
     --divider-star-lg       → mida estrella gran (default 20px)
     --divider-gap           → separació entre estrelles (default 14px)
   ============================================================ */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 40px;
  width: 100%;
  box-sizing: border-box;
}

.section-divider--sm { padding-top: 16px; padding-bottom: 16px; }
.section-divider--lg { padding-top: 48px; padding-bottom: 48px; }

.section-divider__line {
  flex: 1;
  height: 1px;
  min-width: 0;
}

.section-divider__line:first-child {
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--divider-accent-rgb, 156, 85, 28), .55),
    rgba(var(--divider-accent-rgb, 156, 85, 28), 1)
  );
}

.section-divider__line:last-child {
  background: linear-gradient(
    to left,
    transparent,
    rgba(var(--divider-accent-rgb, 156, 85, 28), .55),
    rgba(var(--divider-accent-rgb, 156, 85, 28), 1)
  );
}

.section-divider__ornament {
  display: flex;
  align-items: center;
  gap: var(--divider-gap, 14px);
  flex-shrink: 0;
}

.section-divider__star {
  fill: var(--divider-accent, #9c551c);
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.section-divider__star--sm {
  width:  var(--divider-star-sm, 14px);
  height: var(--divider-star-sm, 14px);
  opacity: 0.7;
}
.section-divider__star--lg {
  width:  var(--divider-star-lg, 20px);
  height: var(--divider-star-lg, 20px);
  opacity: 1;
}

.section-divider:hover .section-divider__star--lg {
  transform: rotate(45deg);
}

@media (max-width: 480px) {
  .section-divider {
    gap: 14px;
    padding-left: 20px;
    padding-right: 20px;
  }
}